<template>
  <div>
    <section class="main isPc">
      <section class="cart">
        <p class="pTitle">
          <router-link tag="a" to="/">首页</router-link> - 
          购物车
        </p>
        <div class="stitle" v-if="gShow">
          您的购物车很空...
        </div>
        <div class="info" v-if="!gShow">
          <p class="title">我的购物车</p>
          <div class="cartList">
            <ul>
              <li class="cartTop">
                <p class="name">商品</p>
                <p class="price">单价</p>
                <p class="number">数量</p>
                <p class="all">小计</p>
              </li>
              <li v-for="item in List">
                <p class="name">
                  <router-link :to="'prcShow?id='+item.goods_id"><img :src="ksrc+item.goods_logo" alt=""></router-link>
                  <router-link :to="'prcShow?id='+item.goods_id">{{item.goods_name}}</router-link>
                  
                </p>
                <p class="price">£{{item.goods_price|allPrice}}</p>
                <p class="number"><input type="number" @change="change(item)"  min="1" v-model="item.goods_count" name=""></p>
                <p class="all">£{{item.amount|allPrice}}</p>
                <p class="click" @click="delPrc(item.id)"></p>
              </li>
            </ul>
          </div>
          <div class="cartPrice">
            <p class="price">总价:<span>£{{allPrice|allPrice}}</span></p>
            <p><router-link tag="button" to="cartEnter">结账</router-link></p>
          </div>
        </div>
      </section>
    </section>

    <section class="mainWap isWap">
      <p class="wapTopTitle">购物车列表</p>

      <div class="cartWap">
        <ul>
          <li class="cartTab">
            <p class="name">商品</p>
            <p class="number">数量</p>
            <p class="price">金额</p>
          </li>
          <li v-for="item in List">
            <p class="name">
              <router-link :to="'prcShow?id='+item.goods_id"><img :src="ksrc+item.goods_logo" alt=""></router-link>
              <router-link :to="'prcShow?id='+item.goods_id">{{item.goods_name}}</router-link>
            </p>
            <p class="number"><input type="number" @change="change(item)"  min="1" v-model="item.goods_count" name=""></p>
            <p class="price">£{{item.goods_price|allPrice}}</p>
            <p class="click" @click="delPrc(item.id)"></p>
          </li>
        </ul>
      </div>
      <div class="cartPriceWap">
        <p class="price">总价:<span>£{{allPrice|allPrice}}</span></p>
        <p class="inputBox"><router-link tag="button" to="cartEnter">结账</router-link></p>
      </div>

    </section>
  </div>
  
</template>

<script>

import axios from 'axios'
import {Get,Post,Delete,Put} from '@/config/api.js'
export default {
  name: 'cart',
  data () {
    return {
      gShow:false,//购物车是否有商品
      allClick:false,//是否全选
      loadStart:false,
      List:[],
      getList:[],
      ksrc:'http://oub2urxei.bkt.clouddn.com/',
      goodsId:''
    }
  },
  created(){
  },
  mounted(){
    //this.vLogin()
    this.getData()
    this.getNowWap()
  },
  computed: {
    allPrice: function() {
      let num=0;
      for (var i = 0; i < this.List.length; i++) {
        num+=this.List[i].amount
      }
      return num.toFixed(2)
    }
  },
  methods:{
    //获取购物车信息
    async getData(){
        if(this.vLogin()){
          this.$store.dispatch("isLoading",true)
          let reg=await Get('/carts?_sort=id&_pagination=false',this.$store.state.token)
          this.List=reg.data
          if(this.List.length==0){
            this.gShow=true
          }
          this.$store.dispatch("isLoading",false)
        }else{
          console.log('未登录')
        }
    },
    //删除商品
    async delPrc(e){
        if(this.vLogin()){
          let reg=await Delete('/carts/'+e,this.$store.state.token)
          alert('删除成功')
          this.getData()
          this.getNowWap()
        }
    },
    //修改商品数量
    async change(e){
      if(this.vLogin()){
          this.$store.dispatch("isLoading",true)
          if(e.goods_count!=0){
            let data={
              "goods_count":e.goods_count
            }
            await Put('/carts/'+e.id,this.$store.state.token,data)
          }else{
            await Delete('/carts/'+e.id,this.$store.state.token)
          }
          this.$store.dispatch("isLoading",false)
          this.getData()
          this.getNowWap()
        }
    },
    //关闭登录窗
    closeLogin(){
      this.$router.push({path:'/home'})
    },
    //wap获取购物车信息
    async getNowWap(){
      if(this.vLogin()){
        let reg=await Get('/carts?_sort=id&_pagination=false',this.$store.state.token)
        let all=0
        for(let i=0;i<reg.data.length;i++){
          all+=reg.data[i].amount
        }
        let data={
          num:reg.data.length,
          price:all
        }
        this.wapPriceCart=reg.data
        this.$store.dispatch("wapCart",data)
      }else{
          console.log('未登录')
        }
    }
  }
}
</script>


